<template>
  <h2>Son - 子组件</h2>
  <p>{{ money }}</p>
  <p>{{ car }}</p>
  <button @click="btn">子组件花钱</button>
</template>

<script setup lang="ts">
interface Props {
  money: number
  car?: string
}
interface Emit {
  (event: 'spend', x: number): void
}

const props = defineProps<Props>()
console.log('子组件接收到数据', props)

// 1. 子组件通过 defineEmit 获取 emit 对象
// const emit = defineEmits(['spend'])
const emit = defineEmits<Emit>()

const btn = () => {
  // 2. 子组件通过 emit 触发事件，并且传递数据
  emit('spend', 500)
}
</script>
